html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	background-color: #88d4ed;
	height: 100%;
}

.clear {
	clear: both;
}


/*找朋友基础样式*/

.findfriend {
	padding: 0.5rem;
}

.findfriend .style {
	text-align: left;
	overflow: hidden;
	margin: 2em 0;
}

.findfriend .style img {
	max-width: 40%;
	float: left;
}

.pc_body .findfriend .style img {
	width: 30%;
}

.findfriend .style span {
	display: block;
	font-size: 1.4rem;
}

.findfriend .style em {
	font-style: normal;
	font-weight: bold;
	font-family: arial;
	display: inline-block;
	margin: 0 0.5rem;
	font-size: 2rem;
	color: #FF6600;
}

.findfriend .style .statistics {
	text-align: right;
}

.findfriend .main {
	width: 100%;
	margin: 1rem 0 3rem;
	text-align: left;
	word-spacing: -0.5em;
	display: box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
}

.findfriend .letter-con {
	box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	opacity: 0;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode: forwards;
	
}

.findfriend .pinyin {
	z-index: 10;
	position: relative;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	height: 4rem;
	line-height: 4rem;
	width: 100%;
	background-color: rgba(250, 250, 250, 1);
	font-size: 2rem;
	text-align: center;
}

.pc_body .findfriend .pinyin {
	height: 5.6rem;
	line-height: 5rem;
	font-size: 3.5rem;
}

.findfriend .pinyin span {
	display: inline-block;
	text-align: center;
}

.findfriend .pinyin:before {
	z-index: 0;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #aaa;
	top: 33.33%;
	left: 0;
}

.findfriend .pinyin:after {
	z-index: 0;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #aaa;
	top: 66.33%;
	left: 0;
}

.findfriend .hanzi {
	position: relative;
	border: 1px solid #aaa;
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	background-color: #fff;
	margin: 1rem auto;
	font-size: 2.4rem;
	cursor: pointer;
}

.pc_body .findfriend .hanzi {
	width: 7.2rem;
	height: 7.2rem;
	line-height: 7.2rem;
	font-size: 4.3rem;
}

.findfriend .hanzi:before {
	z-index: 0;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #aaa;
	top: 50%;
	left: 0;
}

.findfriend .hanzi:after {
	z-index: 0;
	position: absolute;
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: #aaa;
	top: 0;
	left: 50%;
}

.findfriend .pinyin span,
.hanzi span {
	z-index: 1;
	position: relative;
}

.findfriend .action {
	text-align: center;
}

.findfriend .action a {
	display: inline-block;
	width: 30%;
	line-height: 3rem;
	border-radius: 1rem;
	color: #fff;
	background-color: rgb(121, 195, 41);
	font-size: 1.4rem;
	text-decoration: none;
	border: 2px solid #fff;
}

.findfriend .action a:hover {
	background-color: rgb(101, 145, 41);
}

.findfriend .prompt {
	line-height: 160%;
	border: 1px solid #f60;
	padding: 1rem;
	background-color: #fea;
	margin-top: 4rem;
}

.findfriend .over {
	border-color: #000;
	box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}

.findfriend .move {
	color: #f00;
}

.findfriend .right {
	/*border-color:#fff;*/
	color: rgb(81, 195, 11);
	cursor: default;
	/*background-color:rgb(121,195,41);*/
}

.findfriend .shake{
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
}


.pc_body .wrap {
	width: 700px;
	margin: auto;
	padding: 2%;
	min-height: 100%;
}

.starrysky {
	background: url(../img/bg1.png) no-repeat left bottom, -webkit-linear-gradient(left, rgb(59, 75, 106), rgb(52, 65, 95));
	background: url(../img/bg1.png) no-repeat left bottom, -moz-linear-gradient(left, rgb(59, 75, 106), rgb(52, 65, 95));
	background: url(../img/bg1.png) no-repeat left bottom, -o-linear-gradient(left, rgb(59, 75, 106), rgb(52, 65, 95));
	background: url(../img/bg1.png) no-repeat left bottom, linear-gradient(to right, rgb(59, 75, 106), rgb(52, 65, 95));
	background-size: 100%;
	position: relative;
}

.starrysky .findfriend h2,
.starrysky .findfriend .statistics {
	color: #fff;
}

.starrysky .findfriend {
	position: relative;
}

.starrysky .main {
	margin-top: 2rem;
}


/*.starrysky .findfriend:after{
	content:"";
	display: inline-block;
	width:10%;
	position:absolute;
	left:15%;
	top:0;
	margin-top:45%;
	padding-top:20%;
	background:url(../img/fire.png) no-repeat;
	background-size: 100% 100%;
	z-index: 0;
	
}*/

.starrysky .findfriend:before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	left: 50%;
	top: 10%;
	background: url(../img/star.png) no-repeat;
	background-size: 100% 100%;
	animation: star 1s;
	-webkit-animation: star 1s;
	-moz-animation: star 1s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
}

.starrysky:after {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	left: 80%;
	top: 30%;
	background: url(../img/star.png) no-repeat;
	background-size: 100% 100%;
	animation: star 2s;
	-webkit-animation: star 2s;
	-moz-animation: star 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.starrysky:before {
	content: "";
	display: inline-block;
	width: .9rem;
	height: .9rem;
	position: absolute;
	left: 40%;
	top: 20%;
	background: url(../img/star.png) no-repeat;
	background-size: 100% 100%;
	animation: star 1.2s;
	-webkit-animation: star 1.2s;
	-moz-animation: star 1.2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.starrysky .style {
	position: relative;
	z-index: 1;
}

.airship_fly {
	animation: fly 1s;
	-webkit-animation: fly 1s;
}

@keyframes fly {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: 30%;
	}
}

@-webkit-keyframes fly {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: 30%;
	}
}

@-webkit-keyframes star {
	0% {
		-webkit-transform: scale3d(1, 1);
		transform: scale3d(1, 1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale3d(0.8, 0.8);
		transform: scale3d(0.8, 0.8);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: scale3d(1, 1);
		transform: scale3d(1, 1);
		opacity: 1;
	}
}

@-moz-keyframes star {
	0% {
		-moz-transform: scale3d(1, 1);
		transform: scale3d(1, 1);
		opacity: 1;
	}
	50% {
		-moz-transform: scale3d(0.8, 0.8);
		transform: scale3d(0.8, 0.8);
		opacity: 0.5;
	}
	100% {
		-moz-transform: scale3d(1, 1);
		transform: scale3d(1, 1);
		opacity: 1;
	}
}

@keyframes star {
	0% {
		-webkit-transform: scale3d(1, 1);
		transform: scale3d(1, 1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale3d(0.8, 0.8);
		transform: scale3d(0.8, 0.8);
		opacity: 0.5;
	}
	100% {
		transform: scale(1, 1);
		-webkit-transform: scale3d(1, 1);
		opacity: 1;
	}
}

@keyframes fire {
	0% {
		background-image: url(../img/fire.png);
	}
	50 {
		background-image: url(../img/fire2.png);
	}
	100% {
		background-image: url(../img/fire.png);
	}
}

.star_result{
	    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
    display:-webkit-box;
    display:-moz-box;
    display:flex-box;
    -moz-box-align: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
}
.star_result_body{
	width:80%;
	border-radius: 1rem;
	padding:1rem;
	border:0.2rem solid #fff;
	background-color:#FFEEAA;
	text-align: center;
}
.star_result_title{
	font-size:2rem;
}
